import { defineConfig, presetAttributify, presetUno, presetIcons } from 'unocss'
import { transformerDirectives, transformerVariantGroup } from 'unocss'

export default defineConfig({
  // 预设配置
  presets: [
    presetAttributify(), // 属性化模式，如 <div flex="~ items-center">
    presetUno(), // 默认预设，包含 Tailwind CSS 兼容的工具类
    presetIcons({
      scale: 1.2,
      warn: true,
    }), // 图标预设
  ],

  // 主题配置
  theme: {
    colors: {
      primary: '#409EFF', // Element Plus 主色调
      success: '#67C23A',
      warning: '#E6A23C',
      danger: '#F56C6C',
      info: '#909399',
    },
  },

  // 自定义规则
  rules: [
    // 自定义安全区域规则，用于移动端适配
    // ['safe-top', { 'padding-top': 'env(safe-area-inset-top)' }],
    // ['safe-bottom', { 'padding-bottom': 'env(safe-area-inset-bottom)' }],
  ],

  // 快捷方式
  shortcuts: {
    // 常用布局快捷方式
    'flex-center': 'flex items-center justify-center',
    'flex-between': 'flex items-center justify-between',
    'flex-col-center': 'flex flex-col items-center justify-center',
    // 按钮样式
    'btn-primary': 'bg-primary text-white px-4 py-2 rounded cursor-pointer hover:bg-primary-80',
    'btn-default': 'bg-gray-100 text-gray-700 px-4 py-2 rounded cursor-pointer hover:bg-gray-200',
  },

  // 转换器
  transformers: [
    transformerDirectives(), // 支持 @apply 指令
    transformerVariantGroup(), // 支持分组语法，如 "hover:(bg-gray-100 font-medium)"
  ],

  // 扫描文件路径
  content: {
    filesystem: ['**/*.{vue,js,ts,jsx,tsx,html}'],
  },
})
